<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>Elements</title>
    <link rel="import" href="periodic-table/periodic-table.html">
  </head>
  <body>
    <style>

      html
      {
        user-select: none; 

        /* definitions */

        --alkali-metal-primary-color: #ff8a65;
          --alkaline-earth-metal-primary-color: #ffb74d;
          --transition-metal-primary-color: #ffd54f;
          --post-transition-metal-primary-color: #dce775;
          --metalloid-primary-color: #aed581;
          --other-nonmetal-primary-color: #4db6ac;
          --halogen-primary-color: #4dd0e1;
          --noble-gas-primary-color: #4fc3f7;
          --lanthanide-primary-color: #9575cd;
          --actinide-primary-color: #f06292;

          --alkali-metal-background-color: #ffab91;
          --alkaline-earth-metal-background-color: #ffcc80;
          --transition-metal-background-color: #ffe082;
          --post-transition-metal-background-color: #c5e1a5;
          --metalloid-background-color: #a5d6a7;
          --other-nonmetal-background-color: #80cbc4;
          --halogen-background-color: #80deea;
          --noble-gas-background-color: #81d4fa;
          --lanthanide-background-color: #ce93d8;
          --actinide-background-color: #f48fb1;

          --primary-color: #888;
          --secondary-color: #000;
          --background-color: #fff;

          background-color: var(--background-color);
      }

      body::-webkit-scrollbar
      {
        display: none;
        height: 100vh;
        width: 100vw;
      }
    </style>
    <periodic-table id="periodic-table"></periodic-table>
  </body>
</html>
